<template>
    <div class="activityItem">
        <div class="flex">
            <div style="width:30px;text-align: center"><img src="../../../static/img/ucenter/gr@2x.png" width="14" /></div>
            <div class="title">
                {{activityData.realName}}
            </div>
        </div>
        <div class="flex contents">
            <div class="info">
                <div class="flex flex-space-between">
                    <span>单位：<span class="tips">{{activityData.workCompany || '[无]'}}</span></span>
                </div>
                <div class="flex flex-space-between">
                    <div>电话：
                        <span class="tips">{{activityData.mobile}}</span>
                    </div>
                </div>
                <div class="flex flex-space-between">
                    <div>积分：
                        <span class="tips">{{activityData.integral}}</span>
                    </div>
                </div>
                <div class="flex">
                    <div>来源：
                        <span class="tips">{{activityData.area}} {{activityData.village}}</span>
                    </div>
                </div>
            </div>
            <div class="thumb">
                <img :src="activityData.avatar" width="100" height="100" />
            </div>
        </div>
        <div class="flex flex-space-around buttons">
            <button v-if="activityData.checkStatus === 0" class="pass" @click="pass(1)">通过审核</button>
            <button v-if="activityData.checkStatus === 1" class="pass" @click="pass(0)">取消审核</button>
            <button v-if="activityData.checkStatus === 0" class="delete" @click="del">删除申请</button>
        </div>
    </div>
</template>

<script>
    import {Dialog} from 'vant'
    export default {
        props:{
            activityData:{}
        },
        computed: {
        },
        methods: {
            pass(status){
                // this.activityData.id
                Dialog.confirm({
                    title: '确认',
                    message: '您确定'+(status ? '通过' : '取消')+'该用户审核吗？',
                }).then(async () => {
                    await this.$http({
                        method: 'api.team.memberPass',
                        id: this.activityData.id,
                        status: status,
                    });
                    Dialog.alert({
                        title: '成功审核',
                        message: '用户申请已'+(status ? '通过' : '取消')+'审核'
                    }).then(() => {
                        this.$emit('init');
                    });
                }).catch(()=>{})
            },
            del(){
                Dialog.confirm({
                    title: '确认',
                    message: '您确定删除该用户审核吗？',
                }).then(async () => {
                    await this.$http({
                        method: 'api.team.memberDelete',
                        id: this.activityData.id,
                    });
                    Dialog.alert({
                        title: '成功删除',
                        message: '用户申请已删除'
                    }).then(() => {
                        this.$emit('init');
                    });
                }).catch(()=>{})
            }
        },
    }
</script>

<style scoped lang='scss'>
    .activityItem{background: #EFEFEF;border-radius: .1rem;color: #888888;margin-bottom: .14rem;
        padding: .33rem .27rem 0.15rem;
        font-size: 14px;
    }
    .activity-status{
        min-width: 40px;
        border-radius: .16rem;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: .32rem;
        padding: 0 .2rem;
        margin-right: .32rem;
    }
    .title{
        color: #393939;
        font-size: 15px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .contents {
        .info {
            width: 60%;
            > .flex {
                height: 25px;
                line-height: 25px;
            }
        }
        .thumb {
            width: 40%;
        }
    }
    
    .tips{
        color: #393939;
        font-style: normal;
    }
    .text-muted {
        color:#888888;
    }
    .activityItem{font-size: 12px;
        &>div{margin-bottom: .2rem;;}
    }
    .buttons {
        color: #888888;
        font-size: 120%;
        
        > button {
            border:1px solid #888888;
            padding: 0.1rem 0.3rem;
        }
    }
    .apply-num{border: solid 1px #F65D5D;color: #F65D5D;border-radius: 4px;
        padding:  2px;
    }
    .status-0{
        background: #b5bbbe;
    }
    .status-1{
        background: #FFA518;
    }
    .status-2{
        background: #378EEF;
    }
    .status-3{
        background: #0A930A;
    }
    .status-4{
        background: #F65D5D;
    }
</style>
